<template>
    <div>
        <van-nav-bar
            title="功能建议"
            left-arrow
            @click-left="onClickLeft"

            />
        <!-- 详细内容 上半部分-->
        <div class="propose_0">
            <div class="propose">
            <h4>详细内容</h4>
            <div class="propose_1">
                <van-field
                v-model="message"
                size="large"
                rows="2"
                autosize
                type="textarea"
                maxlength="200"
                placeholder="请描述您遇到的问题，有助于我们帮助您尽快解决(选填)"
                show-word-limit  
                style="background-color: #eee;"      />
            </div>
        </div>
        <!-- 上传照片 -->
        <div class="propose_2">
            <p>如有截图配合说明问题，请上传相关照片(选填)</p>
            <van-uploader :after-read="afterRead"
             preview-size="80px" v-model="fileList" multiple :max-count="5" />
        </div>
        </div>
        <!-- 下半部分 -->
        <div class="contacts">
            <h4>联系人</h4>
            <div class="contacts_1">
                <h4>联系电话</h4>
                <span >{{ phone }}</span>
                <van-icon :name="name" color="#bbb" @click="phones" />
            </div>
            <div class="contacts_2">
            <button>一键提交</button>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                fileList:[],
                message:'',
                phone:'15766236758',
                name:'clear'
            }
        },
        methods:{
            onClickLeft() {
            this.$router.push('/customer')
            },
            afterRead(file) {
                    // 此时可以自行将文件上传至服务器
                    console.log(file);
                    },
            phones(){
                this.phone = '';
                this.name = ''
            }
        }
    }
</script>

<style lang="scss" scoped>
.propose_0{
    margin-top: 5px;
    background-color: white;
}
.propose{
    padding: 8px;
}
h4{
    margin-bottom: 10px;
}
.propose_2{
    margin-top: 10px;
    padding:0 8px;
}
p{
    font-size: 12px;
    color: #aaa;
}
/* 联系人 */
.contacts{
    padding: 8px;
    background-color: white;
    margin-top: 10px;
    
}
.contacts_1{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contacts>h4{
    padding: 10px 0;
}
.contacts_2{
    margin-top: 250px;
    display:flex;
    justify-content: center;
}
button{
    background-color: #f03d37;
    border: none;
    color: white;
    padding:10px 100px;
    border-radius: 5px;
}
</style>